<template>
  <div class="my-music">
    <div class="album-slide">
      <div class="album-img">
        <img :src="userInfo.avator">
      </div>
      <ul class="album-info">
        <li>昵称:{{userInfo.username}}</li>
        <li>性别:{{getSex}}</li>
        <li v-if="userInfo.birth">生日：{{userInfo.birth.substr(0,10)}}</li>
        <li>故乡：{{userInfo.location}}</li>
      </ul>
    </div>
    <div class="album-content">
      <div class="album-title">
        个性签名：{{userInfo.introduction}}
      </div>
      <div class="songs-body">
        <ListContent :songList="collectSongs">
          <template slot="title">我的收藏</template>
        </ListContent>
      </div>
    </div>
  </div>
</template>

<script>
import ListContent from "@/components/ListContent";
import {mapState} from 'vuex'
export default {
  name: "MyMusic",
  components:{
    ListContent
  },
  data(){
    return{
      userInfo:[],
      collectSongs:[]
    }
  },
  mounted() {
    this.getConsumer()
    this.getCollect()
  },
  methods:{
    async getConsumer(){
      let result=await this.$API.reqShowConsumerFromId(this.userId)
      if (result.code==10000){
        this.userInfo=result.data
      }else {
       await Promise.reject(new Error('fail'))
      }
    },
    async getCollect(){
     let result= await this.$API.reqShowAllCollectByUserId(this.userId)
      if(result.code==10000){
        for (let item of result.data){
         await this.getSongsOfIds(item.songId);
        }
      }else {
        await Promise.reject(new Error('fail'))
      }
    },
    async getSongsOfIds(id){
      let result=await this.$API.reqShowSongBySongId(id)
      if (result.code==10000){
        this.collectSongs.push(result.data)
      }else {
        await Promise.reject(new Error('fail'))
      }
    }
  },
  computed:{
    ...mapState({
      userId:state => state.home.userId
    }),
    getSex(){
      if (this.userInfo.sex==1){
        return'男'
      }else{
        return'女'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/my-music.scss';
</style>

